<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="gobackClick"
        mode=""
      />
      退款详情
    </view>
    <view class="content">
      <view class="sec1" v-if="refundReturn.seller_state == 1">
        <text>请等待平台处理</text>
        <text>{{ (refundReturn.add_time || 0) | formatDate }}</text>
      </view>
      <view
        :class="[
          'sec2',
          refundReturn.seller_state == 2 || refundReturn.seller_state == 3
            ? 'tkcg'
            : '',
        ]"
      >
        <view class="cxsq" v-if="refundReturn.seller_state == 1">
          <text class="bt">您已成功发起退款申请，请耐心等待平台处理</text>
          <view class="txt">平台同意或者超时未处理，系统将退款给您</view>
          <view class="txt"
            >如果平台拒绝，您可以修改退款申请后再次发起，平台会重新处理</view
          >
          <view class="btns">
            <!-- <view class="btn">撤销申请</view> -->
            <view class="btn" @click="refund(detail.order_sn)">修改申请</view>
          </view>
        </view>
        <view class="tkcg" v-if="refundReturn.seller_state == 2">
          <text>退款总金额</text>
          <text>￥{{ detail.true_amount }}</text>
        </view>
        <view class="cxsq" v-if="refundReturn.seller_state == 3">
          <text class="bt">平台拒绝原因：其他</text>
          <view class="txt">您可以修改申请后再次发起，平台会重新处理</view>
          <view class="txt">如果您逾期未处理，本次申请将自动关闭</view>
          <view class="btns">
            <!-- <view class="btn">撤销申请</view> -->
            <view
              class="btn"
              @click="refund(detail.order_sn)"
              v-if="detail.status == 50 || detail.status == 70"
              >修改申请</view
            >
          </view>
        </view>
      </view>
      <view class="sec3">
        <text class="bt">退款信息</text>
        <view class="box">
          <image class="img" :src="detail.image" mode="" />
          <view class="rig">
            <view class="top">
              <text>{{ detail.name }}</text
              ><text>¥{{ detail.price }}</text>
            </view>
            <view class="cen">
              <text class="num">x{{ detail.number }}</text>
            </view>
          </view>
        </view>
        <view class="txt"
          >退款类型：{{ refundReturn.refund_type | refundType }}</view
        >
        <view class="txt"
          >退款原因：{{ refundReturn.reason_id | reasonId }}</view
        >
        <view class="txt">退款金额：￥{{ detail.true_amount }}</view>
        <view class="txt"
          >申请时间：{{ refundReturn.add_time | formatDate }}</view
        >
        <view class="txt">退款编号：{{ refundReturn.refund_sn }}</view>
        <view class="zxkf" @click="open">
          <image class="img" src="../../../static/Shopping/kef.png" mode="" />
          咨询客服
        </view>
      </view>
    </view>
    <!-- 客服弹窗 -->
    <uni-popup ref="popup1">
      <view class="kfpop">
        <view class="wrchat">微信号{{ wechat }}</view>
        <text>您好，添加微信后记得描述您遇到的问题哦~</text>
        <view class="btn" @click="copyurl(wechat)">复制微信号</view>
        <view class="close" @click="close"></view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order_sn: "", // 订单号
      detail: "",
      refundReturn: "",
      wechat: "8888",
    };
  },
  onLoad(e) {
    this.order_sn = e.order_sn;
    this.orderDetail(this.order_sn);
  },
  methods: {
    gobackClick() {
      uni.navigateBack({
        delta: 1,
      });
    },
    // 获取订单详情
    async orderDetail(id) {
      const res = await this.$myRequest({
        url: "order/orderDetail",
        method: "POST",
        data: {
          order_sn: id,
        },
      });
      if (res.data.code == 1) {
        this.detail = res.data.data;
        this.refundReturn = this.detail.refundReturn;
      }
    },
    // 修改申请
    refund(id) {
      uni.navigateTo({
        url: "./refund?order_sn=" + id,
      });
    },
    open() {
      this.$refs.popup1.open();
    },
    close() {
      this.$refs.popup1.close();
    },
    // 复制链接
    copyurl(url) {
      var copyTest = url;
      var inputTest = document.createElement("input");
      inputTest.value = copyTest;
      document.body.appendChild(inputTest);
      inputTest.select();
      document.execCommand("Copy");
      inputTest.className = "oInput";
      inputTest.style.display = "none";
      uni.showToast({
        icon: "none",
        title: "复制成功",
      });
    },
  },
  filters: {
    // 退款类型
    refundType(val) {
      switch (val) {
        case 1:
          return "仅退款";
        case 2:
          return "退货退款";
      }
    },
    // 退款原因
    reasonId(val) {
      switch (val) {
        case 1:
          return "不想要了";
        case 2:
          return "拍错商品";
        case 3:
          return "地址/电话填写有误";
        case 4:
          return "未按约定时间发货";
        case 5:
          return "协商一致退款";
        case 6:
          return "其他";
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f4f4f4;
  height: 100vh;
  position: relative;
}
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.content {
  padding-top: 88rpx;
  overflow: hidden;
  .sec1 {
    width: 100%;
    height: 206rpx;
    background: url("../../../static/Shopping/tkbj.png") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 60rpx 30rpx;
    text:nth-child(1) {
      display: block;
      width: 100%;
      font-size: 30rpx;
      color: #fff;
      font-weight: bold;
    }
    text:nth-child(2) {
      display: block;
      width: 100%;
      font-size: 26rpx;
      color: #fff;
      margin-top: 20rpx;
    }
  }
  .sec2 {
    width: 100%;
    min-height: 50rpx;
    background: #fff;
    box-sizing: border-box;
    padding: 30rpx;
    margin-bottom: 20rpx;
    &.tkcg {
      margin-top: 20rpx;
    }
    .tkgb {
      font-size: 26rpx;
      color: #333333;
      font-weight: bold;
    }
    .tkcg {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text:nth-child(1) {
        font-size: 30rpx;
        color: #333333;
        font-weight: bold;
      }
      text:nth-child(2) {
        font-size: 30rpx;
        color: #c52b2e;
        font-weight: bold;
      }
    }
    .cxsq {
      .bt {
        display: block;
        width: 100%;
        font-size: 26rpx;
        color: #333333;
        font-weight: normal;
        padding-bottom: 20rpx;
        margin-bottom: 20rpx;
        border-bottom: 1px solid #eee;
      }
      .txt {
        font-size: 22rpx;
        color: #999999;
        box-sizing: border-box;
        padding-left: 20rpx;
        position: relative;
        margin-bottom: 15rpx;
      }
      .txt::before {
        position: absolute;
        content: "";
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background: #eee;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .btns {
        width: 100%;
        margin-top: 25rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .btn {
          width: 120rpx;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;
          margin-left: 20rpx;
          font-size: 24rpx;
          border: 1px solid #707070;
        }
        .btn:nth-child(1) {
          border: 1px solid #c52b2e;
          color: #c52b2e;
        }
      }
    }
  }
  .sec3 {
    width: 100%;
    min-height: 500rpx;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    .bt {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 30rpx;
      font-size: 30rpx;
      color: #333333;
      font-weight: normal;
    }
    .box {
      display: flex;
      box-sizing: border-box;
      padding: 30rpx;
      background: #f9f9f9;
      margin-bottom: 40rpx;
      .img {
        display: block;
        width: 180rpx;
        height: 180rpx;
        object-fit: cover;
        margin-right: 25rpx;
        border-radius: 4px;
      }
      .rig {
        width: 75%;
        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          text:nth-child(1) {
            display: block;
            font-size: 28rpx;
            color: #333333;
            font-weight: bold;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          text:nth-child(2) {
            display: block;
            font-size: 28rpx;
            color: #333;
          }
        }
        .cen {
          font-size: 26rpx;
          color: #999999;
          margin-top: 25rpx;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
    .txt {
      font-size: 26rpx;
      color: #666;
      box-sizing: border-box;
      padding: 0 30rpx;
      margin-bottom: 30rpx;
    }
    .zxkf {
      width: 300rpx;
      height: 66rpx;
      box-sizing: border-box;
      border: 1px solid #c52b2e;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30rpx;
      font-weight: 500;
      color: #c52b2e;
      margin: 50rpx auto;
      border-radius: 33rpx;
      .img {
        display: block;
        width: 30rpx;
        height: 34rpx;
        margin-right: 15rpx;
      }
    }
  }
}
.kfpop {
  width: 478rpx;
  height: 606rpx;
  background: url("../../../static/Shopping/kftc.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 0 58rpx;
  padding-top: 1rpx;
  .wrchat {
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    color: #c52b2e;
    margin-top: 320rpx;
  }
  text {
    display: block;
    text-align: center;
    font-size: 26rpx;
    font-weight: 400;
    color: #999999;
    margin-top: 20rpx;
  }
  .btn {
    width: 250rpx;
    height: 66rpx;
    background: #c52b2e;
    border-radius: 33rpx;
    text-align: center;
    line-height: 66rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: #ffffff;
    margin: 45rpx auto;
  }
  .close {
    position: absolute;
    width: 66rpx;
    height: 66rpx;
    background: url("../../../static/popclose.png") no-repeat;
    background-size: 100% 100%;
    left: 50%;
    transform: translateX(-50%);
    bottom: -100rpx;
  }
}
</style>
